<template>
  <div id="home">
    <router-view></router-view>
    <div id="footer">
      <van-tabbar v-model="active" active-color="#FC766A">
        <van-tabbar-item name="index" to='/home/index'>
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon[0].active : icon[0].inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item name="kinds" to='/home/kinds'>
          <template #icon="props">
            <img :src="props.active ? icon[1].active : icon[1].inactive" />
          </template>
          <span>分类</span>
        </van-tabbar-item>
        <van-tabbar-item name="vip" to='/home/vip'>
          <template  #icon="props">
            <img :src="props.active ? icon[2].active : icon[2].active" />
          </template>
          <span>会员中心</span>
        </van-tabbar-item>
        <van-tabbar-item name="shoplist" to='/home/shoplist'>
          <span>购物车</span>
          <template #icon="props">
            <img :src="props.active ? icon[3].active : icon[3].inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item name="mine" to='/home/mine'>
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon[4].active : icon[4].inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data(){
    return {
      active: '',
       icon: [
         {
            active: 'https://api.10street.cn/wap/images/member/ico_home_select.png',
            inactive: 'https://api.10street.cn/wap/images/member/ico_home.png',
          },
          {
            active: 'https://api.10street.cn/wap/images/member/ico_classify_select.png',
            inactive: 'https://api.10street.cn/wap/images/member/ico_classify.png',
          },
          {
            active: 'https://api.10street.cn/wap/images/member/ico_member.png',
          },
          {
            active: 'https://api.10street.cn/wap/images/member/ico_shop_select.png',
            inactive: 'https://api.10street.cn/wap/images/member/ico_shop.png',
          },
          {
            active: 'https://api.10street.cn/wap/images/member/ico_my_select.png',
            inactive: 'https://api.10street.cn/wap/images/member/ico_my.png',
          },
        ]
    }
  },
  mounted() {
    // console.log(1)
    this.active = this.$route.meta.path;
  },
  // updated() {
  //   this.active = this.$route.meta.path;
  // },
  watch: {
    $route(to,from,){
      this.active = to.meta.path;
    }
  },
}
</script>

<style lang="stylus" scoped>
#home
  padding-bottom 0.5rem
  .van-hairline--top-bottom
    height: .5rem
    img
      width 0.24rem
      height 0.24rem

  #footer
    div:nth-child(3)
      z-index 2
      div
        img 
          width 0.35rem
          height 0.35rem
          margin-top -0.1rem
</style>


